<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙云论坛</title>

    <script src="/js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/utils/request.js"></script>

    <!-- 引入elment-ui样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/banner.css"/>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style type="text/css" lang="scss">
        #headTop {
            /*background: url("/img/page/big_bg(1440).jpg");*/
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 70px;
            margin: auto;
            box-shadow: 0 1px 7px rgba(0,0,0,.3);
            z-index: 1002;
            position: relative;
        }
        .width-70 {
            width: 70%;
        }
        .block {
            height: 40px;
        }
        #headText{
            float:right;
            font-size:16px;
            color: #FF8800;
            text-align: center;
            margin-left: 5px;
            line-height: 40px;
        }
        #show {
            width: 1280px;
            align-items: center;
            /*background-color: #FFFFFF;*/
            margin: 0px auto;
        }
        a{
            color:  #FF8800;
            text-decoration:none;
        }
        a:hover {
            color: #25A5F7;
        }
        .head-show {
            height: 180px;
            width: 100%;
            position: relative;
            background-image: url("/img/page/tab-1.webp");
            background-repeat: no-repeat;
           /* background-position: 70% 80%;*/
        }
        #head-info {
            width:100%;
            height:100px;
            position: absolute;
            bottom: 0;
            display: flex;
        }
        .font-5 {
            font-size: 12px;
            width: 90px;
        }
        .lv-span2 {
            border-radius: 4px;
            line-height: 18px;
            margin: 1px 0 3px 3px;
            height: 18px;
            padding: 1px;
        }
        .lv1-color {
            background-image:linear-gradient(120deg,#84fab0 0%, #8fd3f4 100%);
            color: #ffffff;
            font-weight: bolder;
        }
        .lv5-color {
            background-image:linear-gradient(-22deg,#0acffe 0%, #495aff 100%);
            color: #ffffff;
            font-weight: bolder;
        }
        .lv10-color {
            /*background-image:linear-gradient(120deg,#f6d365 0%, #fda085 100%);*/
            background-image:linear-gradient(-20deg,#fc6076 0%, #ff9a44 100%);
            color: whitesmoke;
            font-weight: bolder;
        }
        .lv15-color {
            background-image:linear-gradient(-40deg,#00dbde 45%, #fc00ff 100%);
            color: floralwhite;
            font-weight: bolder;
        }
        .gly-color {
            padding: 0px;
            background-image:linear-gradient(0deg,#f83600 0%, #f9d423 100%);
            color: #FFFEFF;
        }
        .body-tab-show > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav {
            margin-left: 20px;
        }
        .body-tab-show > .el-tabs {
            background-color: #FFF;
        }
        .body-tab-show > .el-tabs > .el-tabs__header {
            border-bottom: 10px solid #F4F5F7!important;
        }
        .body-tab-show > .el-tabs--top > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll {
            height: 60px;
        }
        .body-tab-show > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap > .el-tabs__nav-scroll > .el-tabs__nav > .el-tabs__item {
            line-height: 60px;
        }
        .body-tab-show > .el-tabs > .el-tabs__header > .el-tabs__nav-wrap::after {
            height: 0px;
        }
        .body-tab-show {
            width: 70%;
            background-color: #FFF;
        }
        .show-attention-left-div {
            width: 30%;
        }
        .show-attention-left-div-top {
            height: 60px;
            background-color: #FFF;
            border-bottom: 10px solid #F4F5F7;
            display: flex;
        }
        .show-attention-left-div-center {
            height: 600px;
            background-color: #FFF;
            border-left: 10px solid #F4F5F7;
            border-bottom: 10px solid #F4F5F7;
            display: flex;
            box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.3);
        }
        .show-attention-left-div-bottom {
            background-color: #F4F5F7;
        }
        .show-info-div {
            margin: 10px 20px 10px 20px;
            line-height: 20px;
            text-align: center;
            color: #999999;
        }
        .show-info-div:hover {
            color: #25A5F7;
        }
        .show-span {
            font-size: 12px;
        }
        .icon {
            width: 20px;
            height: 20px;
        }
        .tabs-title {
            margin-left: 20px;
            font-size: 20px;
        }
        .count {
            border: 1px solid #ddd;
            position: relative;
            background-color: #f6fafb;
            border-radius: 3px;
            color: #777;
            display: inline-block;
            font-size: 12px;
            line-height: 18px;
            height: 18px;
            margin-left: 11px;
            padding: 0 5px;
            vertical-align: middle;
        }
        .count::before{
            content: '';
            width: 0;
            height: 0;
            border: 4px solid;
            position: absolute;
            bottom: 4px;
            left: -9px;
            border-color:transparent #ddd transparent transparent;
        }
        .count::after{
            content: '';
            width: 0;
            height: 0;
            border: 4px solid;
            position: absolute;
            bottom: 4px;
            left: -7.5px;
            border-color:transparent #f6fafb transparent transparent;
        }
        .h2-title {
            font-size: 18px;
            font-weight: 400;
            white-space: normal;
            cursor: pointer;
        }
        .h2-title:hover {
            color: #25A5F7;
        }
        .p-body {
            font-size: 12px;
            color: #6d757a;
            line-height: 20px;
            margin-top: 5px;
            white-space: normal;
            cursor: pointer;
        }
        .p-body:hover {
            color: #25A5F7;
        }
        .bottom-body {
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            white-space: normal;
            color: #999;
        }
        .hr-div {
            height: 1px;
            width: 650px;
            background-color: #ddd;
            margin-top: 20px;
        }
        .show-icon-span {
            width: 40px;
            margin-right: 15px;
        }
        .badge-div {
            margin-top: 20px;
            display: flex;
            width: 700px;
            justify-content: left;
            justify-items: center;
            flex-wrap: wrap;
            margin-left: 20px;
        }
        .badge {
            width: 200px;
            height: 200px;
            border: #eeeeee 1px solid;
            border-radius: 4px;
            margin-bottom: 20px;
            margin-right: 30px;
        }
        .badge-img {
            width: 100px;
            height: 100px;
            padding-top: 30px;
            margin: 0 auto;
            display: block;
        }
        .badge-text {
            text-align: center;
            font-weight: normal;
            color: lightslategray;
            cursor: pointer;
        }
        .badge-text:hover {
            color: #25A5F7;
        }
        .more-span {
            float: right;
            margin-right: 50px;
            font-size: 12px;
            line-height: 22px;
            color: #6d757a;
            border: 1px solid #b8c0cc;
            border-radius: 4px;
            padding: 0 7px 0 10px;
            cursor: pointer;
        }
        .more-span:hover {
            color: #25A5F7;
            border: 1px solid #25A5F7;
        }
    </style>
</head>
<body style="margin: auto">
    <div id="app">
        <div style="background-color: #F4F5F7;">
            <div id="headTop" align="center">
                <div class="banner" align="center">
                    <div class="logo">
                        <img src="/img/icon/heima.png" alt="1"/>
                        <span>
                            <div class="logo-ch">龙云论坛</div>
                            <div class="logo-en">www.longyun.com</div>
                        </span>
                    </div>
                    <div>
                        <span style="float: left;text-align: center;line-height: 70px;margin-right: 15px">
                            <div v-if="this.userInfo.userId == ''">
                                <span class="demo-basic--circle" style="text-align: center;line-height: 70px;cursor: pointer;">
                                    <div @click="dialogVisible = true" class="block"><el-avatar size="large">登 录</el-avatar></div>
                                </span>
                            </div>
                            <div v-if="this.userInfo.userId != ''" style="cursor: pointer;">
                                 <el-dropdown size="small" placement="bottom">
                                    <span class="el-dropdown-link">
                                        <div style="float: left">
                                            <span class="demo-basic--circle" style="float: left;text-align: center;line-height: 70px">
                                                <div class="block" v-if="userInfo.headPortrait">
                                                    <el-avatar size="large" fit="scale-down" :src=this.userInfo.headPortrait></el-avatar>
                                                </div>
                                                <div class="block" v-else>
                                                    <el-avatar size="large" fit="scale-down" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                                                </div>
                                            </span>
                                        </div>
                                        <div id="headText" style="">{{this.userInfo.userName}}</div>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item><div style="text-align: center"></div></el-dropdown-item>
                                        <el-dropdown-item><a :href="getUserHomePage()" target="_blank">个人主页</a></el-dropdown-item>
                                        <el-dropdown-item><span @click="">账户设置</span></el-dropdown-item>
                                        <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </span>
                        <span style="text-align: center;line-height: 40px;margin-right: 15px;">
                            <a href="/index.html"><i class="el-icon-s-home">&nbsp首页</i></a>
                        </span>
                            <span style="text-align: center;line-height: 40px;margin-right: 15px">
                            <a href="/forum/setting"><i class="el-icon-s-tools">&nbsp设置</i></a>
                        </span>
                            <span style="text-align: center;line-height: 40px;margin-right: 15px;">
                            <a href="/forum/getEdit" target="_blank"><i class="el-icon-circle-plus">&nbsp发布</i></a>
                        </span>
                    </div>
                </div>
            </div>

            <div class="width-70" id="show">
                <div class="head-show">
                    <div id="head-info">
                        <div style="padding: 20px 0 0 20px">
                            <div class="block" v-if="userInfo.headPortrait">
                                <el-avatar :size="60" fit="scale-down" :src=this.userInfo.headPortrait></el-avatar>
                            </div>
                            <div class="block" v-else>
                                <el-avatar :size="60" fit="scale-down" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                            </div>
                        </div>
                        <div style="width: 800px;height: 100px;">
                            <div style="margin:20px 0 0 10px;">
                                <span style="font-weight: bolder;font-size: 20px;color: #ffffff ">云海遨游</span>
                                <span style="font-size: 5px;margin-left: 3px">
                                    <span class="font-5" @click="toShowLevel()">
                                        <span v-if="this.userInfo.level < 5" class="lv-span2 lv1-color">
                                            LV_3 初出茅庐
                                        </span>
                                        <span v-if="5 <= this.userInfo.level && this.userInfo.level < 10" class="lv-span2 lv5-color">
                                            LV_3 初出茅庐
                                        </span>
                                        <span v-if="10 <= this.userInfo.level && this.userInfo.level <= 15" class="lv-span2 lv10-color">
                                            LV_3 初出茅庐
                                        </span>
                                        <span v-if="this.userInfo.level > 15" class="lv-span2 lv15-color">
                                            LV_3 初出茅庐
                                        </span>
                                    </span>
                                </span>
                            </div>
                            <div style="margin:10px 0 0 10px;">
                                <span style="font-size: 13px; color:#ffffff;">大家好，我系加加急款好的哈收到货款是等会看看h</span>
                            </div>
                        </div>
                        <div style="width: 100px;height: 100px;">
                        </div>
                    </div>
                </div>

                <div style="display: flex">
                    <div class="body-tab-show">
                        <el-tabs v-model="activeName2" @tab-click="handleClick">
                            <el-tab-pane label="发布" name="first">
                                <div slot="label" style="display: flex;justify-content: center;align-items: center">
                                    <img class="icon" src="/img/icon/push.png"/>
                                    <span style="margin-left: 5px;">我的发布</span>
                                </div>
                                <div>
                                    <div>
                                        <div class="tabs-title" >
                                            我发布的
                                            <span class="count">9</span>
                                            <span class="more-span">更多&nbsp;<i class="el-icon-arrow-right"></i></span>
                                        </div>
                                        <div>
                                            <div class="tabs-title" style="display: flex;">
                                                <div>
                                                    <h2 class="h2-title">测试1111</h2>
                                                    <p class="p-body">
                                                        <span v-if="">江神子·织星雨那是风撒意离离，红尘滚滚后，婆娑佳人身影。缥缈似梦，听谁提，莫念曾相遇时温酒，一夜长，道个...</span>
                                                        <span v-else>江神子·织星雨那是风撒意离离，红尘滚滚后，婆娑佳人身影。缥缈似梦，听谁提，莫念曾相遇时温酒，一夜长，常难寐。颦颦笑语，道个</span>
                                                    </p>
                                                    <div class="bottom-body">
                                                        <span class="show-icon-span"><i title="访问量" class="el-icon-view">&nbsp;234</i></span>
                                                        <span class="show-icon-span"><i title="评论数" class="el-icon-s-comment">&nbsp;2323</i></span>
                                                        <span class="show-icon-span"><i title="发布日期" class="el-icon-alarm-clock">&nbsp;2023-02-21</i></span>
                                                    </div>
                                                    <div class="hr-div"></div>
                                                </div>
                                                <div></div>
                                            </div>
                                            <div class="tabs-title" style="display: flex;">
                                                <div>
                                                    <h2 class="h2-title">你好</h2>
                                                    <p class="p-body">
                                                        说的是等会就31就是发觉了；阿双方均；了师范类；就；离离，红尘滚滚后，婆娑佳人身影。缥缈似梦，听谁提，莫
                                                    </p>
                                                    <div class="bottom-body">
                                                        <span class="show-icon-span"><i title="访问量" class="el-icon-view">&nbsp;234</i></span>
                                                        <span class="show-icon-span"><i title="评论数" class="el-icon-s-comment">&nbsp;2323</i></span>
                                                        <span class="show-icon-span"><i title="发布日期" class="el-icon-alarm-clock">&nbsp;2023-02-21</i></span>
                                                    </div>
                                                    <div class="hr-div"></div>
                                                </div>
                                                <div></div>
                                            </div>
                                            <div class="tabs-title" style="display: flex;">
                                                <div>
                                                    <h2 class="h2-title">你好</h2>
                                                    <p class="p-body">
                                                        说的是等会就31就是发觉了；阿双方均；了师范类；就；离离，红尘滚滚后，婆娑佳人身影。缥缈似梦，听谁提，莫念曾相遇时温
                                                    </p>
                                                    <div class="bottom-body">
                                                        <span class="show-icon-span"><i title="访问量" class="el-icon-view">&nbsp;234</i></span>
                                                        <span class="show-icon-span"><i title="评论数" class="el-icon-s-comment">&nbsp;2323</i></span>
                                                        <span class="show-icon-span"><i title="发布日期" class="el-icon-alarm-clock">&nbsp;2023-02-21</i></span>
                                                    </div>
                                                    <div class="hr-div"></div>
                                                </div>
                                                <div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <div class="tabs-title" style="margin-top: 20px">
                                            荣誉墙
                                            <span class="count">9</span>
                                            <span class="more-span">更多&nbsp;<i class="el-icon-arrow-right"></i></span>
                                        </div>
                                        <div class="badge-div">
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/0.gif">
                                                <h4 class="badge-text">龙云盟主</h4>
                                            </div>
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/1.gif">
                                                <h4 class="badge-text">点赞大师</h4>
                                            </div>
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/2.gif">
                                                <h4 class="badge-text">安全卫士</h4>
                                            </div>
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/3.gif">
                                                <h4 class="badge-text">盖楼大师</h4>
                                            </div>
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/0.gif">
                                                <h4 class="badge-text">大盟主</h4>
                                            </div>
                                            <div class="badge">
                                                <img class="badge-img" src="/img/huizhang/0.gif">
                                                <h4 class="badge-text">龙云创始人</h4>
                                            </div>


                                        </div>
                                    </div>

                                    <div>
                                        <div class="tabs-title" >最新收藏</div>
                                        <div>

                                        </div>
                                    </div>
                                   <!-- <div style="width: 40%;height300px;border: 10px #999999 solid">

                                    </div>-->
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="荣誉勋章" name="second">
                                <div slot="label" style="display: flex;justify-content: center;align-items: center">
                                    <img class="icon" src="/img/icon/xunzhang.png"/>
                                    <span style="margin-left: 5px;">荣誉勋章</span>
                                </div>
                                荣誉勋章·
                            </el-tab-pane>
                            <el-tab-pane label="我的评论" name="third">
                                <div slot="label" style="display: flex;justify-content: center;align-items: center">
                                    <img class="icon" src="/img/icon/review.png"/>
                                    <span style="margin-left: 5px;">我的评论</span>
                                </div>
                                我的评论
                            </el-tab-pane>
                            <el-tab-pane label="浏览记录" name="fourth">
                                <div slot="label" style="display: flex;justify-content: center;align-items: center">
                                    <img class="icon" src="/img/icon/jilu.png"/>
                                    <span style="margin-left: 5px;">浏览记录</span>
                                </div>
                                浏览记录
                            </el-tab-pane>
                            <el-tab-pane label="收藏" name="five">
                                <div slot="label" style="display: flex;justify-content: center;align-items: center">
                                    <img class="icon" src="/img/icon/collect_num.png"/>
                                    <span style="margin-left: 5px;">收藏</span>
                                </div>
                                收藏
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="show-attention-left-div">
                        <div class="show-attention-left-div-top">
                            <div class="show-info-div">
                                <div class="show-span">关注数</div>
                                <div class="show-span">232</div>
                            </div>
                            <div class="show-info-div">
                                <div class="show-span">粉丝数</div>
                                <div class="show-span">22</div>
                            </div>
                            <div class="show-info-div">
                                <div class="show-span">获赞</div>
                                <div class="show-span">2.3万</div>
                            </div>
                            <div class="show-info-div">
                                <div class="show-span">阅读量</div>
                                <div class="show-span">73.2万</div>
                            </div>
                        </div>
                        <div class="show-attention-left-div-center">

                        </div>
                        <div class="show-attention-left-div-bottom">

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div id="loginDialog">
            <el-dialog
                    custom-class="customClass"
                    center
                    title="replace"
                    :visible.sync="dialogVisible"
                    width="40%">
                <template slot='title'>
                    <span>
                      <div class="logo-ch" style="margin-bottom: 10px"><font style="color: #FF8800;font-size:35px;font-weight:700">龙云论坛</font></div>
                      <div class="logo-en"><font style="font-size:20px;color: #999999">www.longyun.com</font> </div>
                    </span>
                </template>
                <div class="digTop">
                    <el-tabs v-model="activeName" type="card" >
                        <el-tab-pane label="登录" name="login">
                            <div id="head" style="width: 50%;margin: 0 auto;">
                                <el-form ref="form1" :model="form" label-width="80px" :rules="rules">
                                    <el-form-item label="用户账号" prop="userAccount">
                                        <el-input v-model="form.userAccount" placeholder="请输入您的账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div style="margin: 0 auto;text-align: center">
                                    <el-button type="success" plain @click="login">立即登录</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="注册" name="second">
                            <div style="width: 50%;margin: 0 auto;">
                                <el-form ref="form2" :model="user" label-width="80px" status-icon :rules="rules">
                                    <el-form-item label="用户账号" prop="userAccount">
                                        <el-input v-model="user.userAccount" placeholder="请输入您的账号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="昵称" prop="userName">
                                        <el-input v-model="user.userName" placeholder="请填写昵称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="password">
                                        <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="checkPass">
                                        <el-input v-model="user.checkPass" show-password placeholder="请再次输入密码"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div style="margin: 0 auto;text-align: center">
                                    <el-button type="success" plain @click="register">立即注册</el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-dialog>
        </div>

    </div>
<script>

// 设置后台服务地址
axios.defaults.baseURL = "http://192.168.2.188:8089";
axios.defaults.timeout = 3000;

let app = new Vue({
    el: "#app",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.user.checkPass !== '') {
                    this.$refs.user.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            form: {
                userAccount:"",
                userName:"",
                password:"",
            }, // 登录表单
            user: {
                userAccount:"",
                userName: "", // post请求内容
                password:"",
                checkPass:"",
            },
            userInfo: {
                userId:"",
                userName: "", // 用户信息
                headPortrait:"",
            },
            activeName: 'login',
            activeName2: 'first',
            dialogVisible: false,
            filterList: {},// 过滤项的假数据
            sortItems: [
                {
                    key: "default",
                    text: "默认",
                },
                {
                    key: "hot",
                    text: "热度",
                },
                {
                    key: "time",
                    text: "时间",
                }
            ],// 排序字段
            postList: [],// 帖子数据
            total: 0, // 总条数
            totalPage: 0, // 总页数
            params: {
                key: "", // 搜索关键字
                page: 1, // 当前页码
                size: 10, // 每页大小
                sortBy: "default",// 排序字段
                filters: {}, // 过滤字段
            },
            ops: "",
            restaurants: [],// 补全值
            timeout:null,
            rules: {
                userAccount: [
                    {required: true, message: "账号不能为空", trigger: "blur"}
                ],
                password: [
                    {required: true, message: "密码不能为空", trigger: "blur"}
                ],
                userName:[
                    {required: true, message: "请填写一个昵称", trigger: "blur"}
                ],
                password:[
                    {validator: validatePass, trigger: 'blur'}
                ],
                checkPass:[
                    {validator: validatePass2, trigger: 'blur'}
                ]
            },
        }
    },
    methods: {
        // 登录
        login() {
            if(this.form.userAccount == ''){
                this.$message({
                    message: '请输入用户账号！',
                    type: 'warning'
                });
                return;
            }
            if(this.form.password == ''){
                this.$message({
                    message: '请输入密码！',
                    type: 'warning'
                });
                return;
            }
            instance.post("/user/login", this.form)
                .then(data => {
                    if (data.data.success) {
                        this.$message({
                            message: '登录成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.form = {};
                        //全局存储token
                        localStorage.setItem("token",data.data.data.jwt);
                        this.userInfo.userId = data.data.data.id;
                        this.userInfo.userName = data.data.data.userName;
                        this.userInfo.headPortrait = data.data.data.headPortrait;
                    } else {
                        this.$message.error('登录失败，' + data.data.errorMsg);
                    }
                }).catch(e => {
                this.$message.error('登录失败，请检查网络！');
            });
        },
        // 注册
        register() {
            if(this.user.userAccount == '' || this.user.userName == '' || this.user.password == '' || this.user.checkPass == ''){
                this.$message({
                    message: '请填写完整表单信息',
                    type: 'warning'
                });
                return;
            }
            if( this.user.password != this.user.checkPass){
                this.$message({
                    message: '两次输入密码不一致！',
                    type: 'warning'
                });
                return;
            }
            instance.post("/user/register", this.user)
                .then(data => {
                    if (data.data.success) {
                        this.$message({
                            message: '注册成功,请进行登录！',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('注册失败，' + data.data.errorMsg);
                    }
                }).catch(e => {
                this.post = []
            });
        },
        // 退出登录
        logout() {
            instance.post("/user/logout")
                .then(data => {
                    if (data.data.success) {
                        this.$message({
                            message: '退出登录成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                        this.form = {};
                        // 删除token
                        localStorage.removeItem("token");
                        this.getUserInfo();
                    } else {
                        this.$message.error('退出登录失败，' + data.data.errorMsg);
                    }
                }).catch(e => {
                this.$message.error('退出失败，请检查网络！');
            });
        },
        // 获取用户信息
        getUserInfo() {
            instance.get("/user/getUserInfo",)
                .then(data => {
                    if (data.data.success) {
                        this.dialogVisible = false;
                        this.userInfo = data.data.data;
                        this.userInfo.userId = data.data.data.id;
                        //刷新token
                        localStorage.setItem("token",data.data.data.jwt);
                    } else{
                        if(data.data.errorCode === 20012){
                            this.toLogin();
                            return;
                        } else{
                            if(data.data.errorCode != 2001){
                                this.$message({
                                    type: 'error',
                                    message: '错误：'+ data.data.errorMsg
                                });
                            }
                        }
                        this.userInfo = {
                            userId:"",
                            userName: "", // 用户信息
                            headPortrait:"",
                        }
                    }
                }).catch(e => {
                this.userInfo = {
                    userId:"",
                    userName: "", // 用户信息
                    headPortrait:"",
                }
            });
        },
        // 跳转至用户主页
        getUserHomePage(){
            var randomNum1 = Math.floor(Math.random() * 100000) - 5;
            var randomNum2 = Math.floor(Math.random() * 100231230) + 32;
            return "/userInfo/personalHomepage/info/" + randomNum1 + "/" + this.userInfo.userId + "?uid_page=home&su="+randomNum2
        },

        handleCurrentChange(val) {
            this.params.page = val;
            this.getPostList();
        },
        prePage() {
            if (this.params.page > 1) {
                this.params.page--
            }
            this.getPostList();
        },
        nextPage() {
            if (this.params.page < this.totalPage) {
                this.params.page++
            }
            this.getPostList();
        },
        toLogin() {
            this.$confirm('登录信息已过期，是否重新登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.dialogVisible = true;
                return;
            }).catch(() => {
                return;
            });
        }
    },

    mounted() {
        this.getUserInfo();
    }

})


</script>

</body>
</html>